

<template>
<div>
     <!-- <Button type="primary" @click="modal1 = true">Display dialog box</Button> -->
     <Modal v-model="mode" width="50%"  title="新增角色" @change="testChange"  @on-cancel="cancel">
         <Row>
          <Form ref="UserData"  :model="UserData"  :rules="ruleInUser" :label-width="100">
                <div style="width:100%;height:auto;margin:0 auto;">
                     <Row>
                    <i-col span="12"> 
                       <FormItem label="角色名称：" prop="RealName"  >
                            <label slot="label">角色名称：</label>
                            <Input v-model="UserData.RoleName" placeholder="请输入名称" ></Input>
                        </FormItem>
                        </i-col>
                      
                         <i-col span="24">
                        <FormItem label="备注：" prop="Remark">
                            <label slot="label">备&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
                            <Input v-model="UserData.Remark" style="width:500px;" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请说明备注事项..."></Input>
                         </FormItem>
                    </i-col>
                       
                  </Row>
                    
                 
                
                  
                   
                </div>
              </Form>
        </Row>

        
        <div slot="footer" >
          <Button type="primary" :loading="loading"  @click="handleSubmit('UserData')">提交</Button>
          <Button :loading="loading" @click="cancel('UserData')">取消</Button>
        </div>
       
    </Modal>
</div>
</template>

<script>
import {getCompanyList,getDeptList,getUserlist,createUserData,getVehlist,subOrderData} from "@/api/data";
import { formatDate } from '../../components/date.js';
export default {
    name: 'UserAdd',
    data () {
        return {
          loading:false,
          mode:this.add,
          
          //表单验证规则
          ruleInUser: {
            UserName: [
              { required: true, message: '请填写登录名', trigger: 'blur' }
            ],

            RealName: [
              { required: true, message: '请填写真实姓名', trigger: 'blur' }
            ],

            Password: [
              { required: true, type:"number", message: '请输入密码', trigger: 'change' }
            ],
                 
             Mobile: [
          {
           required:true,
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
            Role: [
              { required: true, type:"number", message: '请选择角色', trigger: 'change' }
            ],

            FactoryId: [
              { required: true, type:"number",message: '请选择加工厂', trigger: 'change' }
            ],
          },
          FactoryIdList:[],
          RoleList:[],
          listdata:[],
        };
    },
    props:{
        add:{
            type:Boolean ,
            required:true
        },
        UserData:{
            type:Object,
            required:true 
        },
        

    },
    methods: {
      testChange(val){
        this.$emit('testChange',val);
       },
      cancel(){
          this.loading = false; 
          let data = {
            mode:false
          }
          this.$emit('cancelCallBack', data);
       },
      //提交编辑后的userInfo
      handleSubmit(name) {
        
        this.$refs[name].validate(valid => { 
          console.log("提交验证：",valid)    
          if (valid) { 
            this.loading = true;       
            this.submit();
          } else {
            this.$Message.error("请填写相关信息!");
          }
        });
      },
    submit(){
        const data = {
            UserName: this.UserData.UserName,
            Password: "123456",
            RealName: this.UserData.RealName,
           
            Company: this.UserData.Company,
            Dept: this.UserData.Dept
        };
      createUserData(data).then(res =>{
            if(res !== null){
              this.$Message.success("提交成功");
              this.loading = false; 
              let data = {
                mode:false
              }
              this.$emit('success', data);   
            }else if(response.data.flag == 0){
            this.$Message.success("提交失败"); 
            }else if(response.data.flag == 2){
            this.$Message.success("状态过期");
            }
        }).catch(error => {
            this.$Message.error("请核对之后重新提交");
             this.loading = false; 
       });


     },
    },
    mounted () {
        const cmpdata = {
        fields:"Id,CompanyName",
        offset:"0",
        limit:"-1"
      };
      const dptdata = {
        fields:"Id,DeptName",
        offset:"0",
        limit:"-1"
      };
      //获得包含公司Id和companyname字段的全部列表
      getCompanyList(cmpdata).then(res =>{
        this.CompanyList = res.List;
        
      });
      //获得包含公司Id和companyname字段的全部列表
      getDeptList(dptdata).then(res =>{
        this.DeptList = res.List;
      });
    },
    watch: {
        add(val) {
        this.mode = val
    }
}
}
</script>
<style>
.dept .ivu-select-placeholder{
color:#515a6e!important;
}
</style>